<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>infinity 插件页面 主页面</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/mainPage.css">
    <script src="./iconfont/iconfont.js"></script>
</head>

<body>
    <div id="wrap">
        <!-- //遮罩层 -->
        <div class="mask"></div>
        <!-- // 背景图片列表 -->
        <div id="backgroundImg">
            <img src="./images/background/01.jpg" alt="">
        </div>

        <div id="main">
            <!-- // 搜索框 -->
            <section class="searchBox">
                <div class="listBox">
                    <ul class="list">
                        <li>网页</li>
                        <li>图片</li>
                        <li>新闻</li>
                        <li>视频</li>
                        <li>地图</li>
                    </ul>
                </div>

                <label for="#" class="search">
                    <button>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-baidu"></use>
                        </svg>
                        <i class="iconfont arrows">&#xe625;</i>
                    </button>
                    <input type="text" placeholder="输入并搜索...">
                </label>
                <!-- 搜索引擎列表 -->
                <ul class="searchList">
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                        <span>搜索</span>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-baidu"></use>
                            <span>百度</span>
                        </svg>
                    </li>
                    <li>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tianjia"></use>
                        </svg>
                        <span>添加</span>
                    </li>
                </ul>


            </section>

            <!-- // 常用网站列表 -->
            <section class="shortcutList">
                <div class="listBox">
                    <nav class="list">
                        <!-- <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a>
                         <a href="javascript:;">
                            <div class="tagImg">百度</div>
                            <div class="tagTitle">百度首页</div>
                         </a> -->
                    </nav>
                </div>
            </section>

        </div>




        <!-- 右侧功能区 -->
        <div class="function">
            <div class="options">
                <!-- "添加" by 小马 & 小周 -->
                <div id="add-wrap" class="selected">添加</div>
                <!-- "设置" by 小万 -->
                <div id="setting">设置</div>
                <div class="close">X</div>
            </div>

            <div class="option-details">
                <!-- "添加" by 小马 & 小周 -->
                <div class="add">
                    <div class="titles">
                        <h3 id="mr">默认</h3>
                        <h3 id="zdy" class="active">自定义</h3>
                    </div>
                    <div class="content">
                        <!-- "默认" by 小马 -->
                        <div id="default" class=" active show">
                            <div class="df-inner">
                                <input type="text" placeholder="搜索网站">
                                <span class="iconfont fas-search"></span>

                                <div class="aside-1">受欢迎的</div>
                                <div class="box">
                                    
                                     <!-- <div class="tm">
                                        <div class="xtb">
                                            <img src="./images/tags/tm.png" alt="">
                                        </div>
                                        <div class="right">
                                            <h4>天猫</h4>
                                            <p>无描述</p>
                                            <div class="open">打开</div>
                                            <div class="add">添加</div>
                                        </div>
                                    </div> 
                                    <div class="jd">
                                        <div class="xtb">
                                            <img src="./images/tags/jd.png" alt="">
                                        </div>
                                        <div class="right">
                                            <h4>京东</h4>
                                            <p>狗东的网站</p>
                                            <div class="open">打开</div>
                                            <div class="add">添加</div>
                                        </div>
                                    </div>  -->
                                     
                                </div>
                            </div>
                        </div>
                        <!-- "自定义" by 小周 -->
                        <div id="customize">
                            <div class="inner">
                                <div class="left">
                                    <div class="circle"></div>
                                </div>
                                <div class="right">
                                    <div class="web-address">
                                        <p>网站地址</p>
                                        <input type="text" placeholder="http://">
                                    </div>
                                    <div class="web-name">
                                        <p>网站名称</p>
                                        <input type="text" placeholder="网站名称">
                                    </div>
                                    <div class="web-desc">
                                        <p>网站描述</p>
                                        <input type="text" placeholder="描述字数不超过30字">
                                    </div>
                                    <div class="font-set">
                                        <p>字体大小</p>
                                        <div class="bar">
                                            <div class="full-bar"></div>
                                            <div class="little-btn"></div>
                                        </div>
                                    </div>
                                    <div class="icon-color">
                                        <p>颜色</p>
                                        <div class="colors">
                                            <div class="color1"></div>
                                            <div class="color2"></div>
                                            <div class="color3 choosed"></div>
                                            <div class="color4"></div>
                                            <div class="color5"></div>
                                            <div class="color6"></div>
                                            <div class="color7"></div>
                                        </div>
                                    </div>
                                    <button>确定</button>
                                </div>
                            </div>
                            <p>没有更多了</p>
                        </div>
                    </div>
                </div>

                <!-- "设置" by 小万 -->
                <div class="setUp">
                    <!-- 功能区设置界面模板开始 -->
                    <div class="warpBox">
                        <h3>布局</h3>
                        <p>预设布局</p>
                        <ul class="layout clearFix">
                            <li><img src="images/layout4x6.png"> 2x5</li>
                            <li><img src="images/layout6x4.png"> 2x6</li>
                            <li><img src="images/layout3x8.png"> 2x7</li>
                        </ul>
                        <p>列间距</p>
                        <div class="dragCol ds clearFix">
                            <div class="colText"> 50%</div>
                            <div class="drag">
                                <div class="boll"></div>
                                <div class="select"></div>
                            </div>
                        </div>
                        <p>行间距</p>
                        <div class="dragRow ds clearFix">
                            <div class="colText"> 50%</div>
                            <div class="drag">
                                <div class="boll"></div>
                                <div class="select"></div>
                            </div>
                        </div>
                        <p>图标圆角</p>
                        <div class="dragRad ds clearFix">
                            <div class="colText"> 100%</div>
                            <div class="drag">
                                <div class="boll"></div>
                                <div class="select"></div>
                            </div>
                        </div>
                        <p>图标大小</p>
                        <div class="dragSize ds clearFix">
                            <div class="colText"> 50%</div>
                            <div class="drag">
                                <div class="boll"></div>
                                <div class="select"></div>
                            </div>
                        </div>
                        <p>图标透明度</p>
                        <div class="dragSize ds clearFix">
                            <div class="colText"> 50%</div>
                            <div class="drag">
                                <div class="boll"></div>
                                <div class="select"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 功能区设置界面模板结束-->
                </div>
            </div>

        </div>
    </div>
    <script src="./js/webTags.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="js/page.js"></script>
</body>

</html>